<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form" ref="webform" novalidate>
    <div id="text" class="form-group has-feedback formio-component formio-component-textfield formio-component-text " ref="component">
      <label class="control-label " for="text-text">
        Text
      </label>
      <div ref="element">
        <input ref="input" name="data[text]" type="text" class="form-control" lang="en" spellcheck="true" value="Text Default" id="text-text"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="text2" class="form-group has-feedback formio-component formio-component-textfield formio-component-text2 " ref="component">
      <label class="control-label " for="text2-text2">
        Text
      </label>
      <div ref="element">
        <input ref="input" name="data[text2]" type="text" class="form-control" lang="en" spellcheck="true" value="Text Calculated Default" id="text2-text2"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="number" class="form-group has-feedback formio-component formio-component-number formio-component-number " ref="component">
      <label class="control-label " for="number-number">
        Number
      </label>
      <div ref="element">
        <input ref="input" name="data[number]" type="text" class="form-control" lang="en" inputmode="decimal" value="1" id="number-number"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="textArea" class="form-group has-feedback formio-component formio-component-textarea formio-component-textArea " ref="component">
      <label class="control-label " for="textArea-textArea">
        Text Area
      </label>
      <div ref="element">
        <textarea ref="input" name="data[textArea]" type="text" class="form-control" lang="en" spellcheck="true" rows="3" id="textArea-textArea">Area default</textarea>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
      <div class="form-check checkbox">
        <label class=" form-check-label">
          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
          <span>Checkbox False</span>
          </input>
        </label>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
      <div class="form-check checkbox">
        <label class=" form-check-label">
          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
          <span>Checkbox True</span>
          </input>
        </label>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="selectBoxes" class="form-group has-feedback formio-component formio-component-selectboxes formio-component-selectBoxes " ref="component">
      <label class="control-label " for="selectBoxes-selectBoxes">
        Select Boxes
      </label>
      <div class="input-group">
        <div class="checkbox" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-selectBoxes--one">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="one" checked=true id="-selectBoxes--one">
            <span>One</span>
          </label>
        </div>
        <div class="checkbox" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-selectBoxes--two">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="two" id="-selectBoxes--two">
            <span>Two</span>
          </label>
        </div>
        <div class="checkbox" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-selectBoxes--three">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="three" checked=true id="-selectBoxes--three">
            <span>Three</span>
          </label>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="radio" class="form-group has-feedback formio-component formio-component-radio formio-component-radio " ref="component">
      <label class="control-label " for="radio-radio">
        Radio
      </label>
      <div class="input-group">
        <div class="radio" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-radio--one">
            <input ref="input" name="data[radio][-radio]" type="radio" class="form-check-input" lang="en" value="one" id="-radio--one">
            <span>One</span>
          </label>
        </div>
        <div class="radio" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-radio--two">
            <input ref="input" name="data[radio][-radio]" type="radio" class="form-check-input" lang="en" value="two" checked=true id="-radio--two">
            <span>Two</span>
          </label>
        </div>
        <div class="radio" ref="wrapper">
          <label class="control-label form-check-label label-position-right" for="-radio--three">
            <input ref="input" name="data[radio][-radio]" type="radio" class="form-check-input" lang="en" value="three" id="-radio--three">
            <span>Three</span>
          </label>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="select" class="form-group has-feedback formio-component formio-component-select formio-component-select " ref="component">
      <label class="control-label " for="select-select">
        Select
      </label>
      <select ref="selectContainer" name="data[select]" type="text" class="form-control" lang="en" id="select-select" aria-required="false"></select>
      <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" aria-label="autocomplete" />
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dateTime" class="form-group has-feedback formio-component formio-component-datetime formio-component-dateTime " ref="component">
      <label class="control-label " for="dateTime-dateTime">
        Date / Time
      </label>
      <div ref="element">
        <div class="input-group">
          <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" value="2018-08-03" id="dateTime-dateTime"></input>
          <div class="input-group-addon" ref="suffix">
            <i ref="icon" class="fa fa-calendar" style=""></i>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="time" class="form-group has-feedback formio-component formio-component-time formio-component-time " ref="component">
      <label class="control-label " for="time-time">
        Time
      </label>
      <div ref="element">
        <input ref="input" name="data[time]" type="time" class="form-control" lang="en" spellcheck="true" value="13:57" id="time-time"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="day" class="form-group has-feedback formio-component formio-component-day formio-component-day " ref="component">
      <label class="control-label " for="day-day">
        Day
      </label>
      <div class="row">
        <div class="form-group col col-xs-4">
          <label for="day-month" class="">Month</label>
          <div><select ref="month" id="day-month" class="form-control" name="month" lang="en" aria-required="false">
              <option value=''>
              </option>
              <option value='1'>
                January
              </option>
              <option value='2'>
                February
              </option>
              <option value='3'>
                March
              </option>
              <option value='4'>
                April
              </option>
              <option value='5'>
                May
              </option>
              <option value='6'>
                June
              </option>
              <option value='7'>
                July
              </option>
              <option value='8'>
                August
              </option>
              <option value='9'>
                September
              </option>
              <option value='10'>
                October
              </option>
              <option value='11'>
                November
              </option>
              <option value='12'>
                December
              </option>
            </select>
            <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" aria-label="autocomplete" />
          </div>
        </div>
        <div class="form-group col col-xs-3">
          <label for="day-day" class="">Day</label>
          <div>
            <input ref="day" id="day-day" class="form-control formio-day-component-day" type="number" placeholder="" step="1" min="1" max="31" id="day-day"></input>
          </div>
        </div>
        <div class="form-group col col-xs-5">
          <label for="day-year" class="">Year</label>
          <div>
            <input ref="year" id="day-year" class="form-control formio-day-component-year" type="number" placeholder="" step="1" min="1900" max="2030" id="day-day"></input>
          </div>
        </div>
      </div>
      <input name="data[day]" type="hidden" class="form-control" lang="en" value="" ref="input">
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="currency" class="form-group has-feedback formio-component formio-component-currency formio-component-currency " ref="component">
      <label class="control-label " for="currency-currency">
        Currency
      </label>
      <div ref="element">
        <input ref="input" name="data[currency]" type="text" class="form-control" lang="en" inputmode="decimal" value="$100.01" id="currency-currency"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="signature" class="form-group has-feedback formio-component formio-component-signature formio-component-signature  signature-pad" ref="component">
      <label class="control-label " for="signature-signature">
        Signature
      </label>
      <div ref="element">
        <input ref="input" name="data[signature]" type="hidden" class="form-control" lang="en" value="Yes" id="signature-signature"></input>
        <div class="signature-pad-body" style="width: 100%;height: 150;padding:0;margin:0;" tabindex="0" ref="padBody">
          <a class="btn btn-sm btn-default signature-pad-refresh" ref="refresh">
            <i class="fa fa-refresh"></i>
          </a>
          <canvas class="signature-pad-canvas" style="display: none;" height="150" ref="canvas"></canvas>
          <img style="width: 100%;display: inherit;" ref="signatureImage">
        </div>
        <div class="signature-pad-footer">
          Sign above
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="tags" class="form-group has-feedback formio-component formio-component-tags formio-component-tags " ref="component">
      <label class="control-label " for="tags-tags">
        Tags
      </label>
      <div ref="element">
        <input ref="input" name="data[tags]" type="text" class="form-control" lang="en" value="one,two,three" id="tags-tags"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="survey" class="form-group has-feedback formio-component formio-component-survey formio-component-survey " ref="component">
      <label class="control-label " for="survey-survey">
        Survey
      </label>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th></th>
            <th style="text-align: center;">
              A
            </th>
            <th style="text-align: center;">
              B
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              One
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][one]" value="a" id="survey-one-a" ref="input">
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][one]" value="b" id="survey-one-b" ref="input">
            </td>
          </tr>
          <tr>
            <td>
              Two
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][two]" value="a" id="survey-two-a" ref="input">
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][two]" value="b" id="survey-two-b" ref="input">
            </td>
          </tr>
        </tbody>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
      <div class="col
    col-md-6
    col-md-offset-0
    col-md-push-0
    col-md-pull-0
  " ref="column-columns">
        <div id="textField" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
          <label class="control-label " for="textField-textField">
            Text Field
          </label>
          <div ref="element">
            <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" spellcheck="true" value="Column Default" id="textField-textField"></input>
          </div>
          <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
        </div>
      </div>
      <div class="col
    col-md-6
    col-md-offset-0
    col-md-push-0
    col-md-pull-0
  " ref="column-columns">
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="fieldSet" class="form-group formio-component formio-component-fieldset formio-component-fieldSet " ref="component">
      <fieldset>
        <div class="fieldset-body" ref="nested-fieldSet">
          <div id="textField2" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField2 " ref="component">
            <label class="control-label " for="textField2-textField2">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField2]" type="text" class="form-control" lang="en" spellcheck="true" value="Fieldset Default" id="textField2-textField2"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </fieldset>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="panel" class="formio-component formio-component-panel formio-component-panel " ref="component">
      <div class="panel panel-default">
        <div class="panel-heading" role="button" aria-expanded="true" aria-controls="panel-panel" ref="header">
          <h4 class="mb-0 panel-title">
          </h4>
        </div>
        <div class="panel-body" ref="nested-panel" id="panel-panel">
          <div id="textField3" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField3 " ref="component">
            <label class="control-label " for="textField3-textField3">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField3]" type="text" class="form-control" lang="en" spellcheck="true" value="Panel Default" id="textField3-textField3"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="table" class="table-responsive formio-component formio-component-table formio-component-table  formio-component-label-hidden no-top-border-table" ref="component">
      <table class="table
  ">
        <tbody>
          <tr ref="row-table">
            <td ref="table-table-0">
            </td>
            <td ref="table-table-0">
              <div id="textField4" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField4 " ref="component">
                <label class="control-label " for="textField4-textField4">
                  Text Field
                </label>
                <div ref="element">
                  <input ref="input" name="data[textField4]" type="text" class="form-control" lang="en" spellcheck="true" value="Table Default" id="textField4-textField4"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="table-table-0">
            </td>
          </tr>
          <tr ref="row-table">
            <td ref="table-table-1">
            </td>
            <td ref="table-table-1">
            </td>
            <td ref="table-table-1">
            </td>
          </tr>
          <tr ref="row-table">
            <td ref="table-table-2">
            </td>
            <td ref="table-table-2">
            </td>
            <td ref="table-table-2">
            </td>
          </tr>
        </tbody>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="well" class="" ref="component">
      <div class="well">
        <div ref="nested-well">
          <div id="textField5" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField5 " ref="component">
            <label class="control-label " for="textField5-textField5">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField5]" type="text" class="form-control" lang="en" spellcheck="true" value="Well Default" id="textField5-textField5"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="container" class="form-group has-feedback formio-component formio-component-container formio-component-container  formio-component-label-hidden" ref="component">
      <div ref="nested-container">
        <div id="textField6" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField6 " ref="component">
          <label class="control-label " for="textField6-textField6">
            Text Field
          </label>
          <div ref="element">
            <input ref="input" name="data[container][textField6]" type="text" class="form-control" lang="en" spellcheck="true" value="Container Default" id="textField6-textField6"></input>
          </div>
          <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dataGrid" class="form-group has-feedback formio-component formio-component-datagrid formio-component-dataGrid " ref="component">
      <label class="control-label " for="dataGrid-dataGrid">
        Data Grid
      </label>
      <table class="table datagrid-table table-bordered
    ">
        <thead>
          <tr>
            <th class="">
              Text Field
            </th>
            <th>
            </th>
          </tr>
        </thead>
        <tbody ref="datagrid-dataGrid-tbody" data-key="datagrid-dataGrid">
          <tr ref="datagrid-dataGrid-row">
            <td ref="datagrid-dataGrid">
              <div id="textField7" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField7  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][textField7]" type="text" class="form-control" lang="en" spellcheck="true" value="Datagrid Default" id="textField7-textField7"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-default formio-button-remove-row" ref="datagrid-dataGrid-removeRow">
                <i class="fa fa-times-circle-o"></i>
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <button class="btn btn-primary formio-button-add-row" ref="datagrid-dataGrid-addRow">
                <i class="fa fa-plus"></i> Add Another
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="submit" class="form-group has-feedback formio-component formio-component-button formio-component-submit  form-group" ref="component">
      <button ref="button" name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
  </div>
  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
</div>